<script setup lang="ts">
import {ref} from "vue";
import { userRegister} from "@/api/User";
import {ElMessage} from "element-plus";
import router from "@/router";



const loading = ref(false)
const registerRef = ref()
const form = ref({
  userAccount: '',
  userPassword: '',
  checkPassword: ''
})
const rules = {
  userAccount: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur'}
  ],
  userPassword: [
    {required: true, message: '请输入密码', trigger: 'blur'},
    { pattern: /^\S{6,15}$/,
      message: '用户名必须是6-15位的非空字符',
      trigger: 'blur'
    }
  ],
  checkPassword: [
    {required: true, message: '请再次确认密码', trigger: 'blur'},
    { pattern: /^\S{6,15}$/,
      message: '用户名必须是6-15位的非空字符',
      trigger: 'blur'
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value !== form.value.userPassword){
          callback(new Error('两次输入的密码不一致'))
        }else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}
const register = async () => {
  registerRef.value.validate()
  await userRegister(form.value)
  ElMessage.success('注册成功')
  router.push('/login')
}
const reset = () => {
  form.value.userAccount = ''
  form.value.userPassword = ''
  form.value.checkPassword = ''
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!--      头部-->
      <el-header>
        <div class="header">
          <img src="@/assets/bi.svg" alt="" style="width: 50px; height: 50px">
          <span style="font-size: xx-large; font-family: '微软雅黑'">鱼智能BI—智能化数据分析平台</span>
        </div>
      </el-header>

      <!--登陆表单-->
      <el-main>
        <div class="login">
          <el-form
            ref="registerRef"
            style="max-width: 600px"
            :model="form"
            status-icon
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            v-loading="loading"
          >
            <el-form-item label="账户名" prop="userAccount">
              <el-input v-model="form.userAccount" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码" prop="userPassword">
              <el-input
                v-model="form.userPassword"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
              <el-input
                v-model="form.checkPassword"
                type="password"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item class="login-btn">
              <el-button type="primary" @click="register()">
                注册
              </el-button>
              <el-button @click="reset()">重置</el-button>
              <router-link to="/login">返回登录页</router-link>
            </el-form-item>
          </el-form>
        </div>


      </el-main>
      <el-footer >
        <div class="footer">
          <span>
            <a href="https://gitee.com/wangfenghuan3399/smart-bi-back"
               style="text-decoration: none; color: black;"
               onmouseover="this.style.color='blue'"
               onmouseout="this.style.color='black'">
              <span>鱼智能BI开源项目</span>
            </a>
          </span>
          <img src="@/assets/github.svg" alt="" style="width: 25px; height: 25px">
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style lang="less" scoped>
.common-layout {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  flex-direction: column;

  .el-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .el-header {
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 1000;

    .header {
      display: flex;
      align-items: center;
      gap: 16px;

      img {
        width: 50px;
        height: 50px;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
      }

      span {
        font-size: 28px;
        font-family: '微软雅黑';
        color: #2c3e50;
        font-weight: 600;
        letter-spacing: 1px;
      }
    }
  }

  .el-main {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 120px;

    .login {
      width: 100%;
      max-width: 480px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;

      &:hover {
        transform: translateY(-5px);
      }

      .el-form {
        :deep(.el-form-item__label) {
          color: #4a5568;
          font-weight: 500;
        }

        .el-input {
          :deep(.el-input__inner) {
            border-radius: 8px;
            padding: 12px 16px;
          }
        }

        .login-btn {
          margin-top: 32px;
          display: flex;
          justify-content: center;
          gap: 24px;

          .el-button {
            width: 120px;
            border-radius: 8px;
            padding: 12px 20px;
            font-weight: 500;
            transition: all 0.3s ease;

            &:first-child {
              background: #409eff;
              border-color: #409eff;

              &:hover {
                background: #66b1ff;
                transform: scale(1.05);
              }
            }

            &:last-child {
              color: #409eff;
              border-color: #dcdfe6;

              &:hover {
                color: #66b1ff;
                border-color: #c6e2ff;
                background: #ecf5ff;
              }
            }
          }
        }
      }
    }
  }

  .el-footer {
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    padding: 24px 0;
    margin-top: auto;

    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;

      a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #4a5568;
        transition: all 0.3s ease;

        &:hover {
          color: #409eff;
          transform: translateY(-1px);

          span {
            text-decoration: underline;
          }
        }
      }

      img {
        width: 25px;
        height: 25px;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.2);
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .common-layout {
    .el-header {
      height: 70px;

      .header {
        span {
          font-size: 22px;
        }
      }
    }

    .el-main {
      padding: 100px 20px 0;

      .login {
        padding: 30px 20px;
      }
    }
  }
}
</style>
